import './App.scss';
import React, { Component, lazy, Suspense } from 'react';
import { Route, Redirect, Switch } from "react-router-dom"

//路由
import Loading from "./views/LoadingPage";                          //等待页面

//用lazy函数处理过的组件,会变成"懒加载组件", 在项目打包时,对应的组件会被单独打包成一个js文件. 当用户访问这个组件对应的路由时才会临时加载这个组件对应的js文件, 在用户访问项目首页时,由于只访问了必须访问的几个路由, 也只会加载很少的几个js文件, 网页打开速度就会提升. 
var HomeRouter = lazy(() => import('./views/HomeRouter'))           //首页
var SearchPage = lazy(() => import('./views/SearchPage'))           //搜索页
var ClassifyPage = lazy(() => import('./views/ClassifyPage'))       //分类页
var ClassifySearch = lazy(() => import('./views/ClassifySearch'))   //分类搜索
var AllCommodities = lazy(() => import('./views/AllCommodities'))   //全部商品
var CollectionPage = lazy(() => import('./views/CollectionPage'))   //收藏页
var DetailsPage = lazy(() => import('./views/DetailsPage'))         //详情页
var ShoppingCart = lazy(() => import('./views/ShoppingCart'))       //购物车
var MyPage = lazy(() => import('./views/MyPage'))                   //我的
var RegisterPage = lazy(() => import('./views/RegisterPage'))       //注册页
var LogIn = lazy(() => import('./views/LogIn'))                     //登录页
var NotFound = lazy(() => import('./views/NotFound.jsx'))           //404路由页

class App extends Component {
  render() {
    return (
      <div className="App">
        <Suspense fallback={<Loading />}>
          <Switch>
            {/* 如果某个组件中有嵌套路由, 则当前组件对应的路由规则就不能添加exact属性 */}
            <Route path="/home" component={HomeRouter} />                             {/* 首页 */}
            <Redirect exact from="/" to="/home" />                                    {/* 重定向 */}
            <Route path="/all" component={AllCommodities} />                          {/* 全部 */}
            <Route path="/class" component={ClassifyPage} />                          {/* 分类 */}
            <Route path="/classifySearch" component={ClassifySearch}/>                {/* 分类搜索 */}
            <Route exact path="/collection" component={CollectionPage} />             {/* 收藏 */}
            <Route exact path="/details/:id" component={DetailsPage} />               {/* 详情 */}
            <Route path="/login" component={LogIn} />                                 {/* 登录 */}
            <Route path="/register" component={RegisterPage} />                       {/* 注册 */}
            <Route exact path="/my" component={MyPage} />                             {/* 我的 */}
            <Route exact path="/search" component={SearchPage} />                     {/* 搜索 */}
            <Route exact path="/cart" component={ShoppingCart} />                     {/* 购物车 */}
            <Route path="*" component={NotFound} />                                   {/* 404 */}
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;